App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();
    app.defineComponent("str-tab", {
        getDomObj: function () {
            this.attachDom('[role="tab"]', "container")
                .attachEvent("container", "click", this.clickHandler, false);
        },
        clickHandler: function (ev) {
            var target = ev.target;
            var item = Component.getNodeName(target, "DIV");
            if (this.changeItem(item)) {
                this.dispatchCustomEvent("tabchange", {
                    event: ev, 
                    component: this,
                    value: item.dataset.value
                });
            }
        },
        changeItem: function (item, isEvent) {
            var container = this.domList.container.firstElementChild;
            var pLeft = container.getBoundingClientRect().left;
            if (item && item !== this.data.activeItem) {
                this.data.activeItem.classList.remove("active");
                item.classList.add("active");
                this.data.activeItem = item;
                this.property.value = item.dataset.value;
                var rect = item.getBoundingClientRect();
                container.style.setProperty("--start", (rect.left - pLeft) + "px");
                container.style.setProperty("--length", rect.width + "px");
                return true;
            }
            return false;
        },
        setActive: function (str) {
            this.property.value = str;
            var container = this.domList.container;
            var items = container.querySelectorAll(".str-tab-item");
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (item.dataset.value === str) {
                    this.data.activeItem = item;
                    item.classList.add("active");
                    break;
                }
            }
            this.computedPosition(container.firstElementChild, this.data.activeItem);
        },
        resetItem: function (item) {
            var container = this.domList.container.firstElementChild;
            var pLeft = container.getBoundingClientRect().left;
            var rect = item.getBoundingClientRect();
            container.style.setProperty("--start", (rect.left - pLeft) + "px");
            container.style.setProperty("--length", rect.width + "px");
            if (this.property.rendertype === "normal") {
                this.domList.container.style.setProperty("--width", 100 / this.data.options.length + "%");
                container.style.setProperty("--length", 100 / this.data.options.length + "%");
            }
        },
        render: function (next) {
            this.computeData();
            this.fetchAll(["./index.html", "./item.html"], function (textList) {
                this.data.itemHTML = textList[1];
                next(this.renderHTML(textList[0].replace("{{itemHTML}}", textList[1])))
            });
        },
        computeData: function () {
            var property = this.property;
            property.type = property.type || "word";
            property.class = property.class || "";
            property.rendertype = property.rendertype || "normal";
            this.data.options = htmlTool.getOptions(this.slot);
            var width = (100 / this.data.options.length) + "%";
            property.style = "--width: " + width + "; --start: 0; --length: + " + width;
            property.value = property.value || this.data.options[0].value;
            this.data.propertystr = this.createPropertyStr();
        },
        init: function () {
            this.setActive(this.property.value);
        },
        computedPosition: function (parent, child) {
            setTimeout(function callback() {
                var rect = child.getBoundingClientRect();
                if (rect.width != 0) {
                    var pLeft = parent.getBoundingClientRect().left;
                    parent.style.setProperty("--start", (rect.left - pLeft) + "px");
                    parent.style.setProperty("--length", rect.width + "px");
                }
                else {
                    setTimeout(callback, 50);
                }
            }, 50);
        },
        appendOption: function (value, icon, content, feeback) {
            var contentDom = this.domList.container.firstElementChild;
            this.insertAdjacentHTML(contentDom, this.data.itemHTML, "beforeend", function () {
                this.data.options.push({
                    value: value, icon: icon, content: content
                });
                this.resetItem(this.data.activeItem);
                if (typeof feeback === "function") feeback();
            }.bind(this), { option: { value: value, icon: icon, content: content } })
        },
        _getIndexByValue: function (value) {
            var options = this.data.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) return i;
            }
            return -1;
        },
        insertBefore: function (oldValue, value, icon, content, feeback) {
            var index = this._getIndexByValue(oldValue);
            if (index === -1) return this.appendOption(value, icon, content, feeback);
            var contentDom = this.domList.container.firstElementChild;
            var optionItem = contentDom.querySelector("[data-value='" + oldValue + "']");
            this.insertAdjacentHTML(optionItem, this.data.itemHTML, "beforebegin", function () {
                this.data.options.splice(index, 0, { value: value, icon: icon, content: content });
                this.resetItem(this.data.activeItem);
                if (typeof feeback === "function") feeback();
            }.bind(this), { option: { value: value, icon: icon, content: content }})
        },
        removeOption: function (value, feeback) {
            var options = this.data.options, that = this;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) break;
            }
            var item = this.domList.container.querySelector("[data-value='" + value + "']");
            if (item) {
                this.outerHTML(item, "", function () {
                    that.data.options.splice(i, 1);
                    that.resetItem(that.data.activeItem);
                    if (typeof feeback === "function") feeback();
                })
            }
        },
        changeOption: function (value, icon, content, feeback) {
            var options = this.data.options, that = this;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) break;
            }
            var item = this.domList.container.querySelector("[data-value='" + value + "']");
            if (item) {
                this.outerHTML(item, this.data.itemHTML, function () {
                    options[i].icon = icon;
                    options[i].content = content;
                    this.resetItem(this.data.activeItem);
                    if (typeof feeback === "function") feeback();
                }.bind(this), { option: { icon: icon, value: value, content: content }});
            }
        },
        get type() {
            return this.property.type;
        },
        set type(value) {
            if (["icon", "word", "double"].indexOf(value) === -1) return;
            if (value === this.property.type) return;
            var str = '{{each option as options}}' + this.data.itemHTML + '{{/each}}';
            var html = this.renderHTML(str, { type: value, options: this.data.options });
            var that = this, content = this.domList.container.firstElementChild;
            this.innerHTML(content, html, function () {
                that.property.type = value;
                var item = content.querySelector("[data-value='" + that.property.value + "']");
                item.classList.add("active");
                that.data.activeItem = item;
            })
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.domList.container.className = value;
            this.property.class = value;
        },
        get rendertype() {
            return this.property.rendertype;
        },
        set rendertype(value) {
            if (value === this.property.rendertype) return;
            this.domList.container.setAttribute("rendertype", value);
            this.property.rendertype = value;
            this.resetItem(this.data.activeItem);
        },
        get value() {
            return this.property.value;
        },
        set value(value) {
            if (value === this.property.value) return;
            var item = this.domList.container.querySelector("[data-value='" + value + "']");
            if (this.changeItem(item)) this.property.value 
        }
    })
});